Day 03：專案01 - 超簡單個人履歷02 | HTML基本元素 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 3

自我挑戰組

從HTML到Python爬蟲的30天之旅系列第 3 篇

Day 03：專案01 - 超簡單個人履歷02 | HTML基本元素

13th鐵人賽 html vscode extension

Andy Chiang

2021-09-08 08:37:17

3618 瀏覽

分享至

大家早安阿! 來到我們冒險的第三天了，今天我要繼續來介紹HTML的其他常用元素，還沒看過昨天的建議先看完再來看這篇。

HTML基本元素(續)

`<img>`

圖片，src屬性為圖片路徑，alt屬性則是圖片無法正常顯示時，預設顯示的文字。

<img src="./cat.jpg" alt="cat" style="width:400px">

顯示結果為：

獻上可愛貓貓圖，有貓就給讚，對吧XD

圖片無法正常顯示時，顯示alt的文字。

當然gif也可以顯示。

<img src="./rainbow.gif" alt="cat" style="width:400px">

因為截圖就表示不出來gif的效果了，所以我這邊是直接放gif的連結上來，你在你的電腦裡應該也會看到類似效果。

表格

HTML中，表格是一個複合的元素，是由好幾個標籤所組成的。

<table>：標示這是一個表格
<caption>：表格標題名稱
<thead>：表頭區域
<tbody>：表格本體區域
<tr>：一列
<th>：表頭欄位
<td>：一般欄位

<table>
    <caption>2年1班</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成績</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>王小明</td>
            <td>50</td>
        </tr>
        <tr>
            <td>陳小美</td>
            <td>90</td>
        </tr>
        <tr>
            <td>林阿妙</td>
            <td>75</td>
        </tr>
    </tbody>
</table>

顯示結果為：

如果想要顯示邊框，則在<head>裡面加上這個：

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

這個用到CSS的內部載入，明天就會講到了。

顯示結果為：

另外，想要合併表格欄位，使用的是colspan屬性，數字表示合併幾格。

<tr>
    <td colspan=2>林阿妙</td>
</tr>

顯示結果為：

有關表格的詳細介紹請看這裡

清單

HTML的清單分成無序清單以及有序清單。

無序清單

<ul>：標示這是一個無序清單。
<li>：清單中的一項。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

顯示結果為：

type屬性可以設定無序清單樣式。

disc：實心圓(預設)
circle：空心圓
square：正方形

<ul>
    <li type="disc">HTML</li>
    <li type="circle">CSS</li>
    <li type="square">JavaScript</li>
</ul>

顯示結果為：

或者是巢狀無序清單，瀏覽器會自動切換清單樣式。

<ul>
    <li>HTML</li>
    <ul>
        <li>head</li>
        <li>body</li>
        <ul>
            <li>h1</li>
        </ul>
    </ul>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

顯示結果為：

有序清單

<ol>：標示這是一個有序清單。
<li>：清單中的一項。

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

顯示結果為：

也可以用type屬性設定有序清單樣式。

1：阿拉伯數字(預設)
A：大寫英文字母
a：小寫英文字母
I：大寫羅馬數字
i：小寫羅馬數字

<ol>
    <li type="1">HTML</li>
    <li type="A">CSS</li>
    <li type="I">JavaScript</li>
</ol>

顯示結果為：

start屬性設定從數字幾開始數。

<ol start="10">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

顯示結果為：

當然，也可以是巢狀有序清單，但是瀏覽器不會自動切換清單樣式。

<ol>
    <li>HTML</li>
    <ol>
        <li>head</li>
        <li>body</li>
        <ol>
            <li>h1</li>
        </ol>
    </ol>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

顯示結果為：

希望改變樣式也很簡單，只要利用上面講過的type屬性就好了。

<ol>
    <li>HTML</li>
    <ol type="a">
        <li>head</li>
        <li>body</li>
        <ol type="i">
            <li>h1</li>
        </ol>
    </ol>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

顯示結果為：